<template>
    <view>
        <view class="product" v-if="data">
            <view class="product-main">
                <view v-if="!(status == -1 || status == 1)" class="selectdiv" @click="accountSelect">
                    <view class="noselect" v-if="!data.checked"></view>
                    <view class="yesselect" v-else>
                        <iconsfont customIcons="icon-dagou" :color="'#ffffff'" size="24"></iconsfont>
                    </view>
                </view>
                <image
                    mode="aspectFill"
                    class="productimg"
                    @click="goOrderDetail"
                    :src="easyGetImgUrl(data.ThumbnailUrl50)"></image>
                <view class="p-desc" @click="goOrderDetail">
                    <view class="title"
                        ><view class="text-show-line-2">{{ data.ProductName }}</view></view
                    >
                    <view class="spec" v-if="data.ProductSkuList.length > 1"
                        >{{ data.ProductSkuList.length }}种规格可选</view
                    >
                    <view class="price"
                        ><text>￥{{ data.ProductSkuList[0].ProductUnitPriceList[0].Price }}</text
                        >/{{ data.ProductSkuList[0].ProductUnitPriceList[0].UnitName }}</view
                    >
                </view>
            </view>
            <view class="bottom-menu" v-if="data.Status == 0 || data.Status == 3">
                <view class="del" @click="del(4)">删除</view>
                <view class="del" v-if="data.Status == 3" @click="reject">驳回原因</view>
                <view @click="edit">编辑</view>
                <view @click="submit(3)">提交审核</view>
            </view>
            <view class="bottom-menu" v-if="data.Status == 2">
                <view @click="edit(1)">编辑</view>
                <view @click="shelf(2)" v-if="saleStatus == 1">下架</view>
                <view @click="shelf(1)" v-if="saleStatus == 2">上架</view>
            </view>
        </view>
        <uni-popup ref="popTip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                :content="title"
                :before-close="true"
                @close="cancelIt"
                @confirm="doIt"></uni-popup-dialog>
        </uni-popup>
        <uni-popup ref="rejectpopTip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="驳回原因"
                :content="checkMsg"
                :before-close="true"
                @close="rejectcancel"
                @confirm="rejectdoIt"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import { ApplyProduct, DeleteProducts, UpdateProductSaleStatus } from "@/pages/api/product.js"
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
        status: {
            type: Number,
            default: -1,
        },
        saleStatus: {
            type: Number,
            default: -1,
        },
    },
    components: {},
    data() {
        return {
            title: "",
            checkMsg: "",
            num: 0,
        }
    },
    onLoad() {},
    mounted() {},
    methods: {
        ...mapMutations(["UP_PRODUCT_VIEW"]),
        goOrderDetail() {
            this.easyGoTo("/pages/addProduct/index?id=" + this.data.ID + "&look=1")
        },
        reject() {
            this.$refs.rejectpopTip.open()
            this.checkMsg = this.data.CheckMsg
        },
        rejectcancel() {
            this.$refs.rejectpopTip.close()
        },
        rejectdoIt() {
            this.$refs.rejectpopTip.close()
        },
        edit(num) {
            if (num == 1) {
                this.easyGoTo("/pages/addProduct/index?id=" + this.data.ID + "&enter=" + num) //已入驻的成本价不能编辑
            } else {
                this.easyGoTo("/pages/addProduct/index?id=" + this.data.ID)
            }
        },
        del(num) {
            this.num = num
            this.title = "确定要删除选中项？"
            this.$refs.popTip.open()
        },
        submit(num) {
            this.num = num
            this.title = "确定提交审核选中项？"
            this.$refs.popTip.open()
        },
        shelf(num) {
            this.num = num
            if (num == 2) {
                this.title = "确定下架选中项？"
            } else {
                this.title = "确定上架选中项？"
            }
            this.$refs.popTip.open()
        },
        cancelIt() {
            this.$refs.popTip.close()
        },
        doIt() {
            if (this.num == 4) {
                //删除
                let path = "?ids=" + this.data.ID
                this.cancelIt()
                DeleteProducts(path).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("删除成功")
                        setTimeout((e) => {
                            this.UP_PRODUCT_VIEW(new Date().getTime())
                        }, 1000)
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            } else if (this.num == 3) {
                //提交审核
                let path = "?product_id=" + this.data.ID
                this.cancelIt()
                ApplyProduct(path).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("提交成功")
                        setTimeout((e) => {
                            this.UP_PRODUCT_VIEW(new Date().getTime())
                        }, 1000)
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            } else if (this.num == 2) {
                //批量下架
                let path = "?ids=" + this.data.ID + "&state=" + this.num
                this.cancelIt()
                UpdateProductSaleStatus(path).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("操作成功")
                        setTimeout((e) => {
                            this.UP_PRODUCT_VIEW(new Date().getTime())
                        }, 1000)
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            } else if (this.num == 1) {
                //批量上架
                let path = "?ids=" + this.data.ID + "&state=" + this.num
                this.cancelIt()
                UpdateProductSaleStatus(path).then((res) => {
                    if (res.State == 1) {
                        this.easyToast("操作成功")
                        setTimeout((e) => {
                            this.UP_PRODUCT_VIEW(new Date().getTime())
                        }, 1000)
                    } else {
                        this.easyToast(res.Msg)
                    }
                })
            }
        },
        accountSelect() {
            this.data.checked = !this.data.checked
            this.$emit("selectNum")
        },
    },
}
</script>

<style lang="scss">
.product {
    padding: 24rpx;
    background: #ffffff;
    border-radius: 24rpx;
    margin: 0 16rpx 16rpx 16rpx;
}
.product-main {
    padding: 16rpx 0rpx 24rpx 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .productimg {
        width: 192rpx;
        height: 192rpx;
        border-radius: 8rpx;
        margin-right: 24rpx;
    }
    .p-desc {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 192rpx;
        .title {
            display: flex;
            justify-content: space-between;
        }
        .text-show-line-2 {
            flex: 1;
            font-size: 28rpx;
            color: #333333;
        }
        .p-state {
            font-size: 24rpx;
            color: $app-color-main;
            padding-left: 12rpx;
            padding-top: 4rpx;
        }
        .p-state-6 {
            color: #999999;
        }
        .spec {
            font-size: 26rpx;
            color: #999999;
        }
        .price {
            font-size: 24rpx;
            color: #333333;
            text {
                font-size: 32rpx;
                font-weight: bold;
            }
        }
    }
}
.bottom-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    view {
        margin-left: 16rpx;
        width: 160rpx;
        height: 64rpx;
        border-radius: 32rpx;
        border: 1rpx solid $app-color-main;
        font-size: 28rpx;
        color: $app-color-main;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .del {
        color: #222a42;
        border-color: #222a42;
    }
}
.selectdiv {
    margin-right: 24rpx;
}
.noselect {
    width: 36rpx;
    height: 36rpx;
    border: 2rpx solid #b2b2b2;
    border-radius: 50%;
}
.yesselect {
    width: 36rpx;
    height: 36rpx;
    background: $app-color-main;
    border: 2rpx solid $app-color-main;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
